<template>
	<!-- <image :src="imgURL3+'me/me/bgimage.png'" mode="widthFix" style="width: 100%; position: relative;"></image>
	<view style="width: 100%; height:100px;margin-top:-130px;display: flex; position: absolute;">
		<image :src="imgURL3+'me/me/rqi.png'" style="width: 54px; height: 64px; margin-left: 30px;"></image>
		<view style="margin-left: 10px;">
			<view class="text-lg text-white">队伍数量：{{team.totalCharity}}</view>
			<view class="text-lg text-white margin-top-xs">志愿者数量：{{team.totalVolunteer}}</view>
		</view>
	</view> -->
	<image src="../../static/image/volunteer/bg.png" mode="widthFix" style="width: 100%; position: relative;"></image>
	<view class="flex-row" style="width: 100%; height:100px;margin-top:-162px; position: absolute;align-items: center;">
		<image src="../../static/image/volunteer/home.png" style="width: 35px; height:38px; margin-left: 40px;"
			class="margin-right-sm">
		</image>
		<view style="margin-left: 10px;">
			<view class="text-lg text-white">队伍数量：{{team.totalTeam}}个</view>
			<view class="text-lg text-white margin-top-xs">志愿者数量：{{team.totalVolunteer}}人</view>
		</view>
	</view>
	<!-- 搜索框 -->
	<view
		style="width: 100%;height: 1000px; background-color:#fff;margin-top: -40px;border-radius:10px 10px 0px 0px; position: absolute;padding: 5px;padding-top: 10px;">
		<view style="width: 100%; padding: 10px 0;">
			<view style="background-color: #F5F5F5;width: 100%;height: 35px;border-radius: 20px;display: flex;">
				<uni-icons style="margin-left: 5px; line-height: 35px;" type="search" color="red" size="26"></uni-icons>
				<input v-model="param.teamName"
					style="margin-left: 10px;height:35px; font-size: 14px; align-items: center;" placeholder="请输入队伍名称"
					@confirm="getList" @clear="cancel_search" />
			</view>
		</view>
		<!-- 筛选框 -->
		<view class="second flex-row-bt text-df" style="">
			<view class="flex-row" @click="showPicker()">
				<!-- 已筛选 -->
				<view v-show="filters.station.isAsc" class="theme-color ">{{filters.station.name}}</view>
				<view v-show="filters.station.isAsc" class="theme-color iconfont icon-shang1" style="font-size: 40rpx;">
				</view>
				<!-- 未筛选 -->
				<view v-show="!filters.station.isAsc" class="text-low ">按服务站点筛选</view>
				<view v-show="!filters.station.isAsc" class="text-low iconfont icon-xia1" style="font-size: 40rpx;">
				</view>
			</view>
			<view style="display: flex; margin-left: auto">
				<view class="flex-row" @click="byNumber()">
					<view :class="{'theme-color': filters.number.isAsc, 'text-low': !filters.number.isAsc}">
						{{filters.number.name}}
					</view>
					<view>
						<view v-if="filters.number.isAsc" class="theme-color iconfont icon-shang1"
							style="font-size: 40rpx;">
						</view>
						<view v-else class="text-low iconfont icon-xia1" style="font-size: 40rpx;"></view>
					</view>
				</view>
				<!-- <view v-for="(item,index) in open" :key="index" class=" margin-left-xs flex-row"
					@click="change_select(index)">
					<view :class="{'theme-color':item.isAsc}">{{item.name}}</view>
					<view>
						<view v-if="item.isAsc" class="theme-color iconfont icon-shang1" style="font-size: 40rpx;">
						</view>
						<view v-else class="text-low iconfont icon-xia1" style="font-size: 40rpx;"></view>
					</view>
				</view> -->
			</view>
			<!-- 队伍选项 -->
			<ba-tree-picker ref="treePicker" @select-change="selectChange" title="请选择志愿队伍" :localdata="site_list"
				valueKey="value" textKey="label" childrenKey="children" :selectParent="false" :multiple="false"
				:isShowText="false" />
		</view>
		<view v-if="team.volunteerList.length==0" class="text-low" style="margin-top: 15px;text-align: center;">暂无数据
		</view>
		<view v-else style="margin-top:30px;" v-for="(item,index) in team.volunteerList" :key="index">
			<view class="padding-top-xs padding-bottom-xs padding-left-sm padding-right-sm "
				style="border-radius: 10px;background-color: rgba(222, 72, 61, 0.07);"
				@click="toVolunteer(item.teamId,item.teamName,item.volunteerCount,item.status)">
				<view class="flex-row-bt margin-bottom-sm">
					<view class="flex-row" style="align-items: center;width: 80%;">
						<image src="../../static/image/volunteer/flag.png" style="width: 14px;height:14px"
							class="margin-right-xs"></image>
						<view class="text_1_ellipsis">{{item.teamName}}</view>
					</view>
					<view>{{item.volunteerCount}}人</view>
				</view>
				<view class="flex-row-bt" style="margin-left: 24px;">
					<view class="text-low ">{{item.siteName}}</view>
					<view v-if="item.status==1" class="theme-bg-color text-white"
						style="padding: 0 15rpx; height: 48rpx; border-radius: 5px;line-height: 48rpx;">已加入</view>
					<view v-else-if="item.status==0" class=" text-white"
						style="padding: 0 15rpx; height: 48rpx; border-radius: 5px;line-height: 48rpx;background-color: #999;">
						申请中</view>
					<view v-else></view>
				</view>
			</view>
		</view>

		<!-- 分割线 -->
		<!-- <divider marginTop="40px" marginBottom="40px"></divider> -->

	</view>

	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	// import { imgURL2 } from '../../api/request';
	// import { imgURL3 } from '../../api/request'
	import {
		reactive,
		ref
	} from 'vue';
	import { getTeamList, getTeamInfo, getTreeInfo } from "../../api/team/team";
	// 筛选
	const filters = reactive({
		station: {
			name: '',
			value: '0',
			isAsc: false
		},
		number: {
			name: '按人数排行',
			value: '0',
			isAsc: false
		}
	})

	const treePicker = ref(null)
	//站点列表
	const site_list = ref([])
	//拿到选择的志愿者队伍
	let team_list = reactive([])
	const open = ref([
		{
			name: '按人数排行',
			value: '0',
			isAsc: false
		}
	])

	let team = reactive({
		totalTeam: "",
		totalVolunteer: "",
		volunteerList: []
	})
	// 获取队伍请求参数
	const param = reactive({
		current: 1,
		size: 6,
		siteId: null,
		teamName: "",
		orderByPeopleCount: false
	})

	onLoad(() => {
		// //请求数据
		getList()
		// //获取站点列表
		get_teamList()
	})

	//触底刷新
	onReachBottom(async () => {
		param.current++
		getTeamList(param).then((res : any) => {
			const length = res.data.teamList.length
			console.log('length' + length)
			for (let i = 0; i < res.data.size; i++) {
				team.volunteerList.push(res.data.teamList[i])
			}
		})
		console.log(team.volunteerList.length)
	})
	//请求服务队列表数据
	const getList = () => {
		param.current = 1
		console.log('param' + JSON.stringify(param))
		getTeamList(param).then((res : any) => {
			team.totalTeam = res.data.totalTeam
			team.totalVolunteer = res.data.totalVolunteer
			team.volunteerList = res.data.teamList
		})
	}
	//获取站点列表
	const get_teamList = () => {
		getTreeInfo().then(res => {
			site_list.value = res.data
		})
	}
	//取消搜索
	const cancel_search = () => {
		param.teamName = ''
		getList()
	}

	//服务站筛选
	const selectChange = async (list) => {
		team_list = JSON.parse(JSON.stringify(list))
		console.log('服务站筛选' + JSON.stringify(list))
		param.siteId = team_list[0].id
		filters.station.isAsc = true
		filters.station.name = team_list[0].name
		getList()
	}
	// 按人数筛选
	const byNumber = async () => {
		filters.number.isAsc = !filters.number.isAsc
		param.orderByPeopleCount = filters.number.isAsc
		getList()
	}
	// //拿到队伍真实id
	// const getRealId = () => {
	// 	console.log('hh', team_list)
	// 	getTeamInfo(team_list[0].name).then(res => {
	// 		param.teamId = res.data.pkId
	// 		getList()
	// 	})
	// }

	// 显示选择器
	const showPicker = () => {
		treePicker.value._show();
	}
	// 去志愿者列表
	const toVolunteer = (teamId : string, name : string, count : string, status : number) => {
		console.log("status" + typeof (status))
		uni.navigateTo({
			url: '/pages/index/volunteer?teamId=' + teamId + '&name=' + name + '&count=' + count + '&status=' + status
		})
	}
</script>

<style lang="scss" scoped>
	.second {
		//右对齐
		margin-left: auto;
		margin-top: 20rpx;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>